import SecurityView from "@/pages/LoginUserSetting/SecurityView";
import BaseView from "@/pages/LoginUserSetting/BaseView";
import {GridContent} from "@ant-design/pro-components";
import {Menu} from "antd";
import React, {useState} from 'react';
import "./index.less";

interface LoginUserSettingProps {
}

const LoginUserSetting: React.FC<LoginUserSettingProps> = (props) => {
  const [selectKey, setSelectKey] = useState("base");

  const renderChildren = () => {
    switch (selectKey) {
      case 'base':
        return <BaseView/>;
      case 'security':
        return <SecurityView/>;
      default:
        return null;
    }
  };
  return (
    <GridContent className={"login-user-setting-container-wrap"}>
      <div className={"login-user-setting-container"}>
        <div className={"login-user-setting-left-menu"}>
          <Menu
            mode={"vertical"}
            selectedKeys={[selectKey]}
            onClick={({key}) => setSelectKey(key)}
          >
            <Menu.Item key={"base"}>基本信息</Menu.Item>
            <Menu.Item key={"security"}>密码设置</Menu.Item>
          </Menu>
        </div>
        <div className={"login-user-setting-content"}>
          {renderChildren()}
        </div>
      </div>
    </GridContent>
  );
};

export default LoginUserSetting;
